<template>
    <div>
        <a-form-model ref="basicForm" layout="inline" :model="basicForm" @cancel="()=>basicForm = {}" :rules="basicRules">
            <a-collapse :activeKey="[1,2,3]">
                <a-collapse-panel key="1" :header = "equipmentTypeList[$attrs.equipmentType]+'监控点'" >
                    <a slot = "extra">
                      <template v-if="!$attrs.isHide">
                        <a-button @click.stop="onEdit" size="small" type = "primary" icon = "edit" v-show="isEditButton">修改</a-button>
                        <a-button @click.stop="onCancel" size="small" icon = "close" v-show="!isEditButton">取消</a-button>
                        <a-button @click.stop="onSave" size="small" type = "primary" icon = "check" v-show="!isEditButton">保存</a-button>
                      </template>

                    </a>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="监控点编号" prop="monitorCode">
                                <a-input v-model="basicForm.monitorCode" :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="监控点名称" prop="monitorName">
                                <a-input v-model="basicForm.monitorName" :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="排放规律" prop="emissionLaw">
                                <a-select v-model="basicForm.emissionLaw" :disabled="isDisable">
                                    <a-select-option :value="item" v-for="(item,index) in emissionLaw" :key="item">
                                        {{item}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="联系人姓名" prop="monitorUserName">
                                <a-input v-model="basicForm.monitorUserName" :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="联系人电话" prop="monitorUserPhone">
                                <a-input v-model="basicForm.monitorUserPhone" :disabled="isDisable"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                          <a-form-model-item  label="是否进水口" prop="isIntake">
                            <a-checkbox  v-model="basicForm.isIntake"  value="true" name="isIntake" :disabled="isDisable"></a-checkbox>
                          </a-form-model-item>
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="8">
                          <a-form-model-item  label="高度" prop="height">
                            <a-input v-model="basicForm.height" :disabled="isDisable"/>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="经    度" prop="x">
                                <a-input v-model="basicForm.x" :disabled="isDisable" @focus="multiPolygon"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="纬    度" prop="y">
                                <a-input  v-model="basicForm.y" :disabled="isDisable" @focus="multiPolygon"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row type="flex" justify="center">
                        <a-col :span="8">
                            <a-form-model-item  label="是否监测" prop="isMonitor">
                                <a-checkbox v-model="basicForm.isMonitor" value="true" name="isMonitor" :disabled="isDisable"></a-checkbox>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="是否上传" prop="isUpload">
                                <a-checkbox v-model="basicForm.isUpload" value="true" name="isUpload" :disabled="isDisable"></a-checkbox>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item  label="是否停用" prop="isEnable">
                                <a-checkbox v-model="basicForm.isEnable" value="true" name="isEnable" :disabled="isDisable"></a-checkbox>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-col :span="24">
                        <a-form-model-item label="视频监测地址" prop="videoAddress" style="width: 93%">
                            <a-input v-model="basicForm.videoAddress"  :disabled="isDisable"></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-collapse-panel>
<!--                <a-collapse-panel key="2" header = "备案登记信息">-->
<!--                    <a-row type="flex" justify="center">-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="堰槽类型" >-->
<!--                                <a-input  :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="测流段长度(米)">-->
<!--                                <a-input :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="水面宽度（米）">-->
<!--                                <a-select :disabled="isDisable">-->
<!--                                    <a-select-option value="暂无">-->
<!--                                        暂无-->
<!--                                    </a-select-option>-->
<!--                                </a-select>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row type="flex" justify="center">-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="喉道宽度（米）">-->
<!--                                <a-input :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="管径（厘米）">-->
<!--                                <a-input :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="采样位置" prop="emissionLaws">-->
<!--                                <a-select :disabled="isDisable">-->
<!--                                    <a-select-option value="暂无">-->
<!--                                        暂无-->
<!--                                    </a-select-option>-->
<!--                                </a-select>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row type="flex" justify="center">-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="预处理方式" >-->
<!--                                <a-input :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->
<!--                            <a-form-model-item  label="输送距离（米）">-->
<!--                                <a-input :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :span="8">-->

<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                    <a-row type="flex" justify="center">-->
<!--                        <a-col :span="24">-->
<!--                            <a-form-model-item  label="备注" >-->
<!--                                <a-input type="textarea" :disabled="isDisable"/>-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                </a-collapse-panel>-->
            </a-collapse>
        </a-form-model>
      <MapLatlng ref="MapLotlng" :latlng="{x:basicForm.x,y:basicForm.y}" @coordinateChang="coordinateChang"></MapLatlng>
    </div>
</template>

<script>
    import buttonEvent from "@/views/components/mixin/buttonEvent";
    import eventBush from "@/eventBush";
    import MapLatlng from "@/components/Map-Latlng"
    export default {
          components:{
            MapLatlng
          },
        mixins:[buttonEvent],
        name: "wasteWater",
        props: {
            basicForm:{
                type: Object,
                required: true
            },

        },
        data(){
            return {
              equipmentTypeList:['','废气','废水','水站','空气站'],
                emissionLaw:['稳定连续排放','周期性连续排放','不规律连续排放','有规律间断排放','不规律间断排放','其他'],
                labelCol:{
                    span: 8
                },
                basicRules:{
                    monitorCode: [
                        { required: true, message: '请输入监控点编号', trigger: 'blur' }
                    ],
                    emissionLaw: [
                        { required: true, message: '请选择排放规律', trigger: 'blur' }
                    ],
                    monitorName: [
                        { required: true, message: '请输入监控点名称', trigger: 'blur' }
                    ]

                }

            }
        },
        methods:{
          // 添加弹窗经纬度框事件
          multiPolygon(e) {
            e.target.blur();
            this.$refs.MapLotlng.mapModel = true;
            this.$refs.MapLotlng.initData();
          },
          coordinateChang(data){
            this.basicForm.x = data.x;
            this.basicForm.y = data.y;
            this.basicForm.geom = data.geom;
            console.log(data)
          },

            onCancel(){
                this.cancelDispose();
                this.getCompanyInfo()
            },
            onSave(){
                console.log(this.$refs.basicForm)
                this.$refs.basicForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let data=Object.assign({}, this.basicForm);
                    delete data.companyName;
                  data.geom='POINT('+data.x+' '+ data.y+')'
                    this.$api.editMonitorList(data).then(res=>{
                        if(res.data.code==0){
                            this.cancelDispose();
                            this.$message.success('修改完成')
                          eventBush.$emit('monitoringPointList')
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            },
            getCompanyInfo(){
                this.$api.getCompanyInfo(this.company.id).then(res=>{
                    console.log(res.data.data)
                    this.basicForm=res.data.data
                    this.$forceUpdate()
                    this.isShow=true;
                });
            },
        }
    }
</script>

<style scoped lang = "scss">
@import "../../components/style/style.scss";
</style>
